<template>
  <div id="PostForum" class="PostForum">
    <h5 class="PF-Hd">发起讨论</h5>
    <div class="PF-Main">
      <div class="SPM-Title">
        <div class="SPMT-Input">
          <input type="text" placeholder="请输入标题(～￣▽￣)～ " v-model="items.text" ref="count"/>
          <span>还可以输入<b>{{num}}</b>个字符</span>
        </div>
        <div class="SPMT-Classify">
          <ul class="SPMTC-Select" v-show="isSelect">
              <li v-for="(list, temp) in tags" :key="temp" @click="Choice(list.id, list.name)">{{list.name}}</li>
          </ul>
        </div>
      </div>
      <div class="SPM-Tags" v-if="isTopsList"> 
         <div class="TagsDiv"> 
            <span class="addTags" @click="addTopics">添加tag</span>
            <div class="tagsBox">
              <span class="tagsTs" v-show="topicNum!=0" style="color: gray">您可以选择{{topicNum}}个标签</span>
              <span class="J-tags" v-for="(list, temp) in topicsList" :key="temp">
                  <span v-show="list.isShow">
                    <el-tag>{{list.name}}</el-tag>
                    <i class="removeTags" @click="removeJtags(list.temp, list.id)"></i> 
                  </span>
              </span>
            </div>
         </div>
         <div class="TagsList" v-if="isTops">
            <span class="closeTags" @click="closeTagsList"></span>
            <ul class="TagsListItem">
              <li  v-for="(list,temp) in topics" :key="temp" @click="CurrentTop(temp, list.topic_id ,list.topic_name)">
                <el-tag>{{list.topic_name}}</el-tag>
              </li>
            </ul>
         </div>
      </div>
      <div class="SPM-Editor">
        <div id="editorElem" style="text-align:left"></div>
      </div>
      <div class="SPM-Operation">
        <el-button type="primary" size="mini" @click="getContent()">发表</el-button>
        <span class="errts" id="errts" v-show="errts">{{errtsText}}</span>
      </div>
    </div>
  </div>
</template>
<script>
  import E from 'wangeditor'
  import axios from 'axios'
  export default {
    name: 'PostForum',
    components: {
    },
    watch: {
      items: {
        handler: function () {
          var _this = this
          var _sum = 30
          _this.$refs.count.setAttribute('maxlength', _sum)
          _this.number = _sum - _this.$refs.count.value.length
          _this.num = _sum - _this.$refs.count.value.length
          _this.title = _this.$refs.count.value
          document.getElementById('errts').style.display = 'none'
        },
        deep: true
      }
    },
    data () {
      return {
        tags: [],
        topics: [],
        circleId: '',
        title: '',
        content: '',
        tag: '',
        validate_code: '',
        isSelect: false,
        tagId: '',
        tagName: '',
        items: {
          text: ''
        },
        num: 30,
        errtsText: '',
        errts: false,
        isTops: false,
        isTopsList: true,
        classItem: [],
        topicsId: [],
        topicsList: [],
        topicNum: 1,
        editor:'',
        postImgs: [],
      }
    },
    methods: {
      removeJtags: function (temp, id) {
        for (const i in this.topicsList) {
          if (this.topicsList[i].temp === temp) {
            this.topicsList.splice(i, 1)
          }
        }
        for (const i in this.topicsId) {
          if (this.topicsId[i] === '' + id + '') {
            this.topicsId.splice(i, 1)
          }
        }
        this.topics[temp].isActive = false
        this.topicNum += 1
      },
      CurrentTop: function (temp, id, name) {
        if (this.topics[temp].isActive === true) {
          this.topics[temp].isActive = false
          for (const i in this.topicsList) {
            if (this.topicsList[i].temp === temp) {
              this.topicsList.splice(i, 1)
            }
          }
          for (const i in this.topicsId) {
            if (this.topicsId[i] === '' + id + '') {
              this.topicsId.splice(i, 1)
            }
          }
          this.topicNum += 1
        } else if (this.topics[temp].isActive === false) {
          if (this.topicNum > 0) {
            this.topics[temp].isActive = true
            let obj = {
              'id': id,
              'name': name,
              'isShow': true,
              'temp': temp
            }
            this.topicsList.push(obj)
            this.topicsId.push('' + id + '')
            this.topicNum -= 1
          }
        }
      },
      Choice: function (tagId, tagName) { // 选择分类
        this.tagId = tagId
        this.tagName = tagName
        this.isSelect = false
      },
      addTopics: function () {
        this.isTops = true
      },
      closeTagsList: function () {
        this.isTops = false
        // this.isTopsList = false
      },
      getContent: function () { // 发送评论
        var tag = this.topicsList[0].name
        var text = this.editor.txt.text()
        if (this.title !== '' && text !== '' && this.topicsList[0] !== undefined) {
          document.getElementById('errts').style.display = 'none'
          this.postHtml(this.postImgs,this.title, text, tag)
        } else {
          document.getElementById('errts').style.display = 'inline-block'
          document.getElementById('errts').innerHTML = '请填写相关选项'
        }
      },
      postHtml: function (imgs, title, text, tag) {
        axios({
          method: 'post',
          baseURL: '/api',
          url: '/posts/send/post',      
          dataType: 'jsonp',
          headers: { 'Access-Control-Allow-Origin':'*' },
          responseType: 'json',
          data:{
            uid:1,
            content:text,
            pictures:imgs,
            title: title,
            tag:tag,
          },
          timeout: 100000
        }).then(function (res) {
          if (res.data.code === 200) {
            this.errts = false
          } else {
            document.getElementById('errts').style.display = 'inline-block'
            document.getElementById('errts').innerHTML = res.data.message
          }
        })
        this.postImgs = []
      }
    },
    created: function () {
      var res = {
        data:{
          tags:[
            {
              id:0,
              name:"杂谈",
            },
            {
              id:1,
              name:"生活",
            },
            {
              id:2,
              name:"游戏",
            },
            {
              id:3,
              name:"动画",
            },
            {
              id:4,
              name:"技术",
            },
            {
              id:5,
              name:"虚拟偶像",
            }
          ],

        },
        body:{
          topics:[
            {
              topic_id:1,
              topic_name:"杂谈",
              isActive:true,
            },
            {
              topic_id:2,
              topic_name:"生活",
              isActive:true,
            },
            {
              topic_id:3,
              topic_name:"游戏",
              isActive:true,
            },
            {
              topic_id:4,
              topic_name:"动画",
              isActive:true,
            },
            {
              topic_id:5,
              topic_name:"技术",
              isActive:true,
            },
            {
              topic_id:6,
              topic_name:"虚拟偶像",
              isActive:true,
            },
          ]
        }
      }
      this.tags = res.data.tags
      if (res.body.topics.length === 0 || res.body.topics.length === 1) {
            this.isTopsList = false
            if (res.body.topics.length === 1) {
              this.topicsId.push('' + res.body.topics[0].topic_id + '')
            }
          } else {
            for (let i in res.body.topics) {
              res.body.topics[i]['isActive'] = false
            }
            this.topics = res.body.topics
          }
    },
    mounted () {
      var that = this
      this.editor = new E('#editorElem')
      this.editor.config.menus = [
        'link',  // 插入链接
        'emoticon',  // 表情
        'image', // 插入图片
        'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
      ]
      this.editor.config.height = 150
      this.editor.config.linkImgCallback = function (src,alt,href) {
          that.postImgs.push(src)
          console.log(alt,href)
      }
      this.editor.create()
      // document.getElementById('PostHtml').addEventListener('click', function () {
      //   // this.editorContent = editor.txt.html()
      //   _this.getContent(this.editor.txt.html())
      // })
    }
  }
</script>

<style>

.PostForum {
  height: auto;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
}

.PostForum .PF-Hd {
  font-size: 16px;
  font-family: "Microsoft YaHei";
  color: #404040;
  font-weight: bold;
  line-height: 1.5;
  background: url(../images/icon15.png) no-repeat center left;
  padding-left: 20px;
  margin-bottom: 25px;
}

.PostForum .PF-Main {
  width: 100%;
  height: auto;
}

.PostForum .PF-Main .SPM-Title {
  height: 40px;
  width: 100%;
  margin-bottom: 15px;
}

.PostForum .PF-Main .SPM-Title .SPMT-Input {
  position: relative;
  width: 600px;
  font-size: 12px;
  font-family: "Microsoft YaHei";
  color: gray;
  margin-right: 20px;
}

.PostForum .PF-Main .SPM-Title input {
  width: 448px;
  padding-right: 130px;
  padding-left: 20px;
  height: 38px;
  outline: none;
}

.PostForum .PF-Main .SPM-Title span {
  position: absolute;
  right: 15px;
  top: 13px;
}

.PostForum .PF-Main .SPM-Title .SPMT-Classify {
  position: relative;
  width: 136px;
  padding: 0 10px;
  height: 40px;
  font-size: 14px;
  font-family: "Microsoft YaHei";
  color: #4d4d4d;
  background: #fff;
}

.PostForum .PF-Main .SPM-Title .SPMT-Classify .SPMTC-Select {
  position: absolute;
  top: 40px;
  left: -1px;
  width: 156px;
  min-height: 32px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  z-index: 100004;
}

.PostForum .PF-Main .SPM-Title .SPMT-Classify .SPMTC-Select li {
  position: relative;
  padding: 0 10px;
  height: 40px;
  text-align: left;
  line-height: 40px;
  cursor: pointer;
  z-index: 100004;
}

.PostForum .PF-Main .SPM-Title .SPMT-Classify .SPMTC-Select li:hover {
  background: #f1f1f1;
}

.PostForum .PF-Main .SPM-Tags {
  position: relative;
  min-height: 30px;
  width: 100%;
  margin: 15px 0;
}

.PostForum .PF-Main .SPM-Tags .TagsDiv {
  position: relative;
  min-height: 30px;
  width: 100%;
  font-size: 14px;
  font-family: "Microsoft YaHei";
  line-height: 30px;
}

.PostForum .PF-Main .SPM-Tags .TagsDiv .addTags {
  color: #0099e5;
  padding-left: 20px;
  background: url(../images/btn.png) no-repeat center left;
  margin-right: 30px;
}

.PostForum .PF-Main .SPM-Tags .TagsDiv .tagsBox {
  width: 755px;
  min-height: 30px;
}

.PostForum .PF-Main .SPM-Tags .TagsDiv .tagsBox span {
  position: relative;
  float: left;
  display: inline-block;
  padding-right: 30px;
  margin-right: 10px;
}

.PostForum .PF-Main .SPM-Tags .TagsDiv .tagsBox span i {
  position: absolute;
  display: inline-block;
  width: 11px;
  height: 11px;
  top: 10px;
  right: 10px;
  background: url(../images/close.png) no-repeat center;
}

.PostForum .PF-Main .SPM-Tags .TagsList {
  position: absolute;
  top: 45px;
  width: 500px;
  min-height: 30px;
  max-height: 600px;
  background: #f5f7f8;
  border: 1px solid #15c5ce;
  z-index: 100004;
  overflow: hidden;
  overflow-y: auto;
}

.PostForum .PF-Main .SPM-Tags .TagsList .closeTags {
  position: absolute;
  top: 10px;
  right: 15px;
  display: inline-block;
  width: 11px;
  height: 11px;
  background: url(../images/close.png) no-repeat center;
}

.PostForum .PF-Main .SPM-Tags .TagsList .TagsListItem {
  width: 100%;
  height: 100%;
}

.PostForum .PF-Main .SPM-Tags .TagsList li {
  float: left;
  overflow: hidden;
  margin-right: 20px;
  margin-bottom: 15px;
}


.PostForum .PF-Main .SPM-Operation {
  height: 48px;
  line-height: 40px;
}

.PostForum .PF-Main .SPM-Operation span {
  font-size: 12px;
}

.PostForum .PF-Main .SPM-Operation .errts {
  margin-right: 20px;
  color: #ff3333;
  padding-left: 20px;
  background: url(../images/icon16.png) no-repeat center left;
}


</style>
